<template>
  <div class="company">
    <a-row>
      <a-col>
        <h3>
          <i class="fa fa-building" />
          <span style="margin-left: 8px;font-weight: bold;font-size: 16px;">{{ $t("Company") }}</span>
        </h3>
      </a-col>
    </a-row>
    <a-row style="margin-top: 16px;">
      <a-col :span="24" style="display: flex;">
        <a-button style="margin-right: 8px;font-size: 12px;" v-permission="['createFlag']" @click="onAddClick"><i class="fa fa-plus" /><span  style="margin-left: 4px;margin-right: 4px;">{{ $t("add") }}</span></a-button>
        <a-button style="margin-right: 8px;font-size: 12px;" @click="handleFlush"><i class="fa fa-sync" /><span  style="margin-left: 4px;margin-right: 4px;">{{ $t("refresh") }}</span></a-button>
        <a-button style="margin-right: 8px;font-size: 12px;" v-permission="['export']" type="default" @click="exportClick">
          <i class="fa fa-download" style="margin-left: 4px; margin-right: 4px" />{{ $t("导出") }}
        </a-button>
        <a-input-group compact style="margin-right: 8px;">
          <a-input style="width: 200px;" v-model:value="queryParam.keyword" :placeholder="`${$t('search')}...`" allowClear @pressEnter="onSearch"/>
          <a-button type="" class="search" @click="onSearch"><i class="fa fa-search-plus" /><span style="margin-left: 4px;margin-right: 4px;">{{ $t('search') }}</span></a-button>
        </a-input-group>
      </a-col>
    </a-row>
    <!-- 数据展示 -->
    <Table
      ref="Tabular"
      :tableDatas="dataSource"
      :loading="loading"
      :pages="pages"
      :total="total"
      :columns="columns"
      @search="handleSearch"
    >
      <template #outSource="{ row, index }">
        <span>{{ row.outSource === 1 ? $t("Yes") : $t("No") }}</span>
      </template>
      <template #email="{ row, index }">
        <span>{{ row.email ? text : '-' }}</span>
      </template>
      <template #operation="{ row, index }">
          <i class="fa fa-cogs" style="margin-right: 8px;cursor:pointer;" @click="handleUnit(row)"/>
          <i class="far fa-edit"  v-permission="['modifyFlag']" style="margin-right: 8px;cursor:pointer;" @click="handleUpdate(row)"/>
          <a-popconfirm
            :title="$t('你确定要删除吗')"
            :ok-text="$t('确定')"
            :cancel-text="$t('取消')"
            @confirm="handleDelete(row, index)"
            @cancel="cancel"
          >
            <i class="far fa-trash-alt" v-permission="['removeFlag']" style="margin-right: 8px;cursor:pointer;color: red;"/>
          </a-popconfirm>
      </template>
    </Table>

    <companyModal ref="child" @addCompany="addCompanyChange"/>

    <companyUnitModal ref="companyUnitModalRef" />
  </div>
</template>
<script setup lang="ts">
  import { h } from 'vue';
  import Table from "@/components/Table/index.vue";
  import { reactive, ref, watch, onMounted, getCurrentInstance } from "vue";
  import itforcePagination from '@/components/itforce-pagination/itforce-pagination.vue'
  import companyModal from './components/company-modal.vue'
  import companyUnitModal from './components/company-unit-modal.vue'
  import { GetEnterprise, GetEnterpriseUuid, GetEnterpriseAdd, DeleteEnterprise, PosteEterpriseExport } from "@/api/organization/index";
  import { Modal, message } from 'ant-design-vue';
  import { useI18n } from 'vue-i18n';
  import { Session } from "@/utils/storage";
  const { t: $t } = useI18n();
  let loading = ref(false)
  let dataSource = ref([])
  const columns = [
    {
      title: () => {
        return (
          $t('唯一编码')
        )
      },
      dataIndex: 'uniqueCode',
      align: 'left'
    },
    {
      title: () => {
        return (
          $t('公司简称')
        )
      },
      dataIndex: 'shortName',
      align: 'left'
    },
    {
      title: () => {
        return (
          $t('公司名称')
        )
      },
      dataIndex: 'name',
      ellipsis: true,
      align: 'left'
    },
    {
      title: () => {
        return (
          $t('地址')
        )
      },
      dataIndex: 'address',
      ellipsis: true,
      align: 'left'
    },
    {
      title: () => {
        return (
          $t('网址')
        )
      },
      dataIndex: 'website',
      align: 'left'
    },
    {
      title: () => {
        return (
          $t('电话')
        )
      },
      dataIndex: 'phone',
      align: 'left'
    },
    {
      title: 'Email',
      dataIndex: 'email',
      slot: "email",
      align: 'left'
    },
    {
      title: () => {
        return (
          $t('外部公司')
        )
      },
      dataIndex: 'outSource',
      slot: "outSource",
      align: 'left'
    },
    {
      title: () => {
        return (
          $t('单元描述')
        )
      },
      dataIndex: 'description',
      slot: "description",
      align: 'left'
    },
    {
      title: '',
      dataIndex: 'operation',
      slot: "operation",
      width: 200
    }
  ]
  let queryParam = ref({
    keyword: null
  })
  let pages = ref<object>({ pageSize: 30, pageNo: 1 });
  let total = ref(20);
  let Tabular = ref(null);
  const handleSearch = ({searchForm, pager }) => {
    pages.value.pageSize = pager.pageSize;
    pages.value.pageNo = pager.pageNo;
    getList()
  }
  const getList = () => {
    loading.value = true
    GetEnterprise({
      ...pages.value,
      keyword: queryParam.value.keyword
    }).then((res) => {
      if (res.code !== 200) return
      dataSource.value = res.data
      total.value = res.totalCount;
      pages.value.pageSize = res.pageSize;
      pages.value.pageNo = res.pageNo;
    }).finally(() => {
      loading.value = false
    });
  }
  onMounted(() => {
    getList()
  })
  const handleDelete = (record: {}, index: any) => {
    DeleteEnterprise({
      uuid: record.uuid
    }).then(res => {
      if (res.code !== 200) return message.warning($t('操作失败'));
      message.success($t('操作成功'));
      getList()
    })
  }
  
  const onSearch = debounce((evt) => {
    // ---- ^ 业务逻辑 ----
    // 定义fn方法
    const fn = (evt) => {
      pages.value.pageSize = 10;
      pages.value.pageNo = 1;
      getList()
    }
    // 调用fn方法
    fn(evt)
    // ---- / 业务逻辑 ----
  }, 1000)
  const handleFlush = () => {
    Tabular.value.flush();
  };
  // --------- 新增编辑 ---------------------
  const child = ref(null)
  const onAddClick = () => {
    if (child.value) child.value.showModal()
  }
  const handleUpdate = (record: {}) => {
    child.value.showModal(record)
  }
  const addCompanyChange = (addRecord) => {
    if (addRecord.id) {
      GetEnterpriseUuid({...addRecord}).then(res => {
        if (res.code !== 200) return message.warning($t('操作失败'));
        message.success($t('操作成功'));
        child.value.hideModal()
        handleFlush()
      })
    } else {
      GetEnterpriseAdd({...addRecord}).then(res => {
        if (res.code !== 200) return message.warning($t('操作失败'));
        message.success($t('操作成功'));
        child.value.hideModal()
        handleFlush()
      })
    }
  }

  const companyUnitModalRef = ref(null)
  const handleUnit = (record: {}) => {
    if (companyUnitModalRef.value) companyUnitModalRef.value.showModal(record)
  }
 
  const exportClick = async () => {
    const responseType = 'blob'; // 设置响应类型为blob
    await PosteEterpriseExport().then(res => {
      console.log('ddddd', res)
      let params = res.headers
      let name = params['content-disposition']
      let filename = name.split('=')
      const blob = new Blob([res.data], { type: 'application/octet-stream' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename[1]; // 设置下载文件名
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
    })
  }
</script>
<style lang="scss" scoped>
.company {
  padding: 24px 24px 0 16px;
}
.pagination-left {
  color: #676a6c;
}
.search {
  height: 32.86px;
  background-color: #fff;
  color: #676a6c;
  border: 1px solid #d9d9d9;
  border-radius: 0 3px 3px 0;
}
::v-deep {
  .ant-table-wrapper  .ant-table {
    font-size: 12px !important;
  }
  // 全局样式修改回来
  .ant-input-affix-wrapper {
    border: 1px solid #dadada !important;
    height: 100%;
  }
  .ant-input:hover,
  .ant-input {
    border-bottom: none !important;
  }
  .ant-input-affix-wrapper >input.ant-input {
    padding: 4px 11px;
  }
  .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
    border-color: var(--btn-bg-save) !important;
  }
  .ant-input-affix-wrapper-focused,
  .ant-input-affix-wrapper:hover,
  .ant-input-affix-wrapper:focus {
    border-color: var(--btn-bg-save) !important;
  }
  .ant-input-affix-wrapper:focus {
    border: 1px solid #d9d9d9 !important;
  }
  .ant-input-affix-wrapper:hover {
    border: 1px solid #d9d9d9 !important;
  }
  .ant-input-affix-wrapper .ant-input-suffix {
    padding-right: 4px;
  }
  .ant-input-group.ant-input-group-compact>*:first-child {
    border-start-start-radius: 3px;
    border-end-start-radius: 3px;
  }
  .ant-input-group.ant-input-group-compact>*:last-child {
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
  }
}
</style>
